<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    response.setHeader("cache-control","public");
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>考务管理</title>
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/font/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/common.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/examMng/core.css">
    <link rel="stylesheet" href="<%=path%>/static/css/examMng/examMng.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/examMng/paperMng.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/jstreeview/plugins/bootstrap-dialog/bootstrap-dialog.min.css">

    <style type="text/css">
        .icob {
            float: right;
            margin-right: 20px;
            font-size: 20px;
        }
        input[type="radio"] {
            margin-left: 0px !important;
        }
        .div-answer {
            line-height:2em;
        }
        .div-title {
            line-height:3em;
            font-size:20px;
        }
        .div-pic {
            float: left;
            margin-right: 20px;
        }

       /* #pageContent{
            width:1168px; !important;!*调整显示区的宽*!
            height:1800px;!*调整显示区的高*!
            font-size:12px;
            line-height:23px;
            overflow-pageINdex:hidden;
            overflow-y:hidden;
            word-break:break-all;
        }
        #pages a{
            font-size:12px;
            color:#000000;
            text-decoration:underline;
        }
        #pages a:hover{
            font-size:12px;
            color:#CC0000;
            text-decoration:underline;
        }*/

    </style>

    <script type="text/javascript" src="<%=path%>/static/jstreeview/bootstrap/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="<%=path%>/static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="<%=path%>/static/jstreeview/plugins/bootstrap-dialog/bootstrap-dialog.min.js"></script>
    <script src="<%=path%>/static/js/respond.js"></script>
    <script src="<%=path%>/static/js/jquery-1.9.1.min.js"></script>
    <script src="<%=path%>/static/js/bootstrap.min.js"></script>
    <script src="<%=path%>/static/js/examMng/right-btn.js"></script>
    <script src="<%=path%>/static/html2image/html2canvas.min.js"></script>
    <script src="<%=path%>/static/html2image/canvas2image.js"></script>
    <script src="<%=path%>/static/js/toImage/saveimg.js"></script>
</head>
<body>

<!--head begin-->
<jsp:include page="../head.jsp" flush="true"/>
<span id="toCanvasBtn"></span>
<span id="saveImageBtn"></span>
<div class="main-container">
    <div class="container info-add body-box">
        <div class="info-add-box" style="background: #4c4ca6">
            <p>打印预览</p>
            <a href="javascript:history.go(-1);"><i class="glyphicon glyphicon-arrow-left"></i>&nbsp;返回</a>
        </div>
        <div>
            <p class="issue-title" style="margin-top: 20px;">${paper.title}</p>
            <div id="toImageBtn" class="icob" title="打印" href="javascript:void(0);">
                <i class="glyphicon glyphicon-print"></i>
            </div>
        </div>
        <div id="container" style="padding:20px 60px;">
            <div>
                <h4>一、单选题（每题10分，共20分）</h4>
                <ol>
                    <c:forEach items="${singlelist}" var="question" varStatus="status">
                        <li>
                            <div class="div-title"><b>${status.count}.</b>${question.title}</div>
                            <c:if test="${not empty question.picture && !(question.picture eq null) }">
                                <img style="width: 200px;height: 250px;" src="<%=basePath%>${question.picture}"/></br>
                            </c:if>
                            <div class="div-pic"><b>A.&nbsp;</b>${question.a}
                                <c:if test="${not empty question.apic && !(question.apic eq null) }">
                                    <div><img style="width: 200px;height: 250px;" src="<%=basePath%>${question.apic}"/></div>
                                </c:if>
                            </div>
                            <div class="div-pic"><b>B.&nbsp;</b>${question.b}
                                <c:if test="${not empty question.bpic && !(question.bpic eq null) }">
                                    <div><img style="width: 200px;height: 250px;" src="<%=basePath%>${question.bpic}"/></div>
                                </c:if>
                            </div>
                            <div class="div-pic"><b>C.&nbsp;</b>${question.c}
                                <c:if test="${not empty question.cpic && !(question.cpic eq null) }">
                                    <div><img style="width: 200px;height: 250px;" src="<%=basePath%>${question.cpic}"/></div>
                                </c:if>
                            </div>
                            <div><b>D.&nbsp;</b>${question.d}
                                <c:if test="${not empty question.dpic && !(question.dpic eq null) }">
                                    <div><img style="width: 200px;height: 250px;" src="<%=basePath%>${question.dpic}"/></div>
                                </c:if>
                            </div>
                            <div class="div-answer">正确答案：<b>${question.answer}</b></div>
                        </li>
                    </c:forEach>
                </ol>
            </div>

            <div>
                <h4>二、多选题（每题10分，共20分）</h4>
                <ol>
                    <c:forEach items="${mutilist}" var="question" varStatus="status">
                        <li>
                            <div class="div-title"><b>${status.count + singlecount}.</b>${question.title}</div>
                            <c:if test="${not empty question.picture && !(question.picture eq null) }">
                                <img style="width: 200px;height: 250px;" src="<%=basePath%>${question.picture}"/></br>
                            </c:if>
                            <div class="div-pic"><b>A.&nbsp;</b>${question.a}
                                <c:if test="${not empty question.apic && !(question.apic eq null) }">
                                    <div><img style="width: 200px;height: 250px;" src="<%=basePath%>${question.apic}"/></div>
                                </c:if>
                            </div>
                            <div class="div-pic"><b>B.&nbsp;</b>${question.b}
                                <c:if test="${not empty question.bpic && !(question.bpic eq null) }">
                                    <div><img style="width: 200px;height: 250px;" src="<%=basePath%>${question.bpic}"/></div>
                                </c:if>
                            </div>
                            <div class="div-pic"><b>C.&nbsp;</b>${question.c}
                                <c:if test="${not empty question.cpic && !(question.cpic eq null) }">
                                    <div><img style="width: 200px;height: 250px;" src="<%=basePath%>${question.cpic}"/></div>
                                </c:if>
                            </div>
                            <div><b>D.&nbsp;</b>${question.d}
                                <c:if test="${not empty question.dpic && !(question.dpic eq null) }">
                                    <div><img style="width: 200px;height: 250px;" src="<%=basePath%>${question.dpic}"/></div>
                                </c:if>
                            </div>
                            <div class="div-answer">正确答案：<b>${question.answer}</b></div>
                        </li>
                    </c:forEach>
                </ol>
            </div>
            <div>
                <h4>三、判断题（每题10分，共20分）</h4>
                <ol>
                    <c:forEach items="${judgelist}" var="question" varStatus="status">
                        <li>
                            <div class="div-title"><b>${status.count + singlecount + muticount}.</b>${question.title}</div>
                            <c:if test="${not empty question.picture && !(question.picture eq null) }">
                                <img style="width: 200px;height: 250px;" src="<%=basePath%>${question.picture}"/></br>
                            </c:if>
                            <div class="div-pic"><b>A.&nbsp;</b>${question.a}
                                <c:if test="${not empty question.apic && !(question.apic eq null) }">
                                    <div><img style="width: 200px;height: 250px;" src="<%=basePath%>${question.apic}"/></div>
                                </c:if>
                            </div>
                            <div><b>B.&nbsp;</b>${question.b}
                               <c:if test="${not empty question.bpic && !(question.bpic eq null) }">
                                    <div><img style="width: 200px;height: 250px;" src="<%=basePath%>${question.bpic}"/></div>
                                </c:if>
                            </div>
                            <div class="div-answer">正确答案：<b>${question.answer}</b></div>
                        </li>
                    </c:forEach>
                </ol>
            </div>
        </div>
        </div>
       <%-- <div id="pages" style="font-size:12px;line-height:40px; text-align:center;"></div>--%>
    </div>
</div>

<%--<script language="javascript">
    var obj = document.getElementById("pageContent");  //获取内容层
    var pages = document.getElementById("pages");         //获取翻页层
    var pgindex=1;                                      //当前页
    window.onload = function()                             //重写窗体加载的事件
    {
        var allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj. offsetHeight));//获取页面数量
        pages.innerHTML = "<b>共"+allpages+"页</b> ";     //输出页面数量
        for (var i=1;i<=allpages;i++){
            pages.innerHTML += "<a href=\"javascript:showPage('"+i+"');\">第"+i+"页</a> ";
            //循环输出第几页
        }
        pages.innerHTML += " <a href=\"javascript:gotopage('-1');\">上一页</a>  <a href=\"javascript:gotopage('1');\">下一页</a>"
    }
    function gotopage(value){
        try{
            value=="-1"?showPage(pgindex-1):showPage(pgindex+1);
        }catch(e){

        }
    }
    function showPage(pageINdex)
    {
        obj.scrollTop=(pageINdex-1)*parseInt(obj.offsetHeight);                                                                  //根据高度，输出指定的页
        pgindex=pageINdex;
    }
</script>--%>
<!--body end-->
<script>
    $(function () {
        // 试卷管理
        if (${role eq 'master'}) {
            $('#topMain').children().eq(0).addClass('active'); // 追加样式;
            $('#topMain').children().eq(0).children().attr('href', '#');
        } else if (${role eq 'trainee'}) {
            $('#topMain').children().eq(0).addClass('active'); // 追加样式;
            $('#topMain').children().eq(0).children().attr('href', '#');
        } else {
            $('#topMain').children().eq(4).addClass('active'); // 追加样式;
        }
        $('#toCanvasBtn').click();
        let answerStr = '${answer}';
        if (answerStr=="yes") {
            $(".div-answer").css("display","block");//显示div
        } else if (answerStr=="no"){
            $(".div-answer").css("display","none");//隐藏div
        } else if (answerStr=="nopicn"){
            $("img").not(".backImg").css("display","none");//隐藏div
            $(".div-answer").css("display","none");//隐藏div
        } else if (answerStr=="nopicy"){
            $("img").not(".backImg").css("display","none");//隐藏div
            $(".div-answer").css("display","block");//显示div
        }

    })
    $("#toImageBtn").click(function () {
        BootstrapDialog.confirm({
            title : '提示',
            message : '是否确认打印',
            size : BootstrapDialog.SIZE_SMALL,
            type : BootstrapDialog.TYPE_DEFAULT,
            closable : true,
            btnCancelLabel : '取消',
            btnOKLabel : '确认打印',
            callback : function(result) {
                // 点击确定按钮时，result为true
                if (result) {
                    $("#saveImageBtn").trigger("click");
                }
            }
        });
    });
    var paperName = "${paper.title}";

    class CreateImg {
        constructor(domId) {
            this.$container = $('#container'); //需要转换为图片的容器
            this.$toCanvasBtn = $('#toCanvasBtn'); //点击转换容器为画布的元素
            this.$toImageBtn = $('#toImageBtn'); //点击转换画布为图片的元素
            this.$saveImageBtn = $('#saveImageBtn'); //点击转换画布为图片的元素
            this.$saveBox = $('#saveBox'); //点击保存图片的容器
            this.toCanvas(); //初始化
        }
        /* 元素转canvas */
        toCanvas() {
            this.$toCanvasBtn.click(e => {
                html2canvas(this.$container[0]).then(canvas => {
                    this.toImage(canvas);
                });
            });
        }
        /* canvas转图片 */
        toImage(canvas) {
            this.$toImageBtn.click(e => {
                this.saveImage(canvas); //保存图片
            });
        }

        /* 保存图片 */
        saveImage(canvas) {
            this.$saveImageBtn.click(e => {
                let type = "png"; //图片类型
                let w = $("#container").outerWidth(true); //图片宽度
                let h = $("#container").outerHeight(true); //图片高度
                let f = paperName; //图片文件名
                console.info(w);
                console.info(h);
                Canvas2Image.saveAsImage(canvas, w, h, type, f); //调用Canvas2Image插件
            });
        }
    };
    new CreateImg();
</script>
</body>
</html>
